<template>
  <div class="app-container">
    <template v-if="vaState != undefined && vaState != 4">
      <el-steps :active="step" align-center finish-status="success">
        <el-step title="STEP 1" :description="step1Msg" :status="step1Status"></el-step>
        <el-step title="STEP 2" description="KYC审核"></el-step>
        <el-step title="STEP 3" description="开户审核"></el-step>
      </el-steps>
      <div v-if="vaState === -2 || vaState === 2" style="width: 100%;">
        <el-upload
          style="display:flex;align-items: center;margin: 20px;"
          class="upload-demo"
          ref="upload"
          :limit="1"
          :on-success="onUploadSuccess"
          :headers="headers"
          :action="uploadFileUrl"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交审核</el-button>
          <div  style="margin-left: 10px;" slot="tip" class="el-upload__tip">只能是压缩文件，且不超过20MB</div>
        </el-upload>
<!--        <el-tag v-if="vaAccount.remark" type="danger" style="margin-top: 50px;width: 100%;text-align: center">KYC审核驳回: {{vaAccount.remark}}</el-tag>-->
        <el-tabs tab-position="left" style="height:auto;margin-top:20px;border:  1px solid #e5e6eb;;padding: 50px">
          <el-tab-pane label="个人开户">
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in personal"
                :key="index"
                :timestamp="activity.timestamp">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
            <p>个人用户请先扫描二维码(手机相机或者浏览器)完成KYC认证</p>
            <el-button type="primary" @click="genQR()">点击生成二维码</el-button>
            <div style="text-align: center;margin-top: 20px">
              <div id="qrcode"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="企业开户">
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in ent"
                :key="index"
                :timestamp="activity.timestamp">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="vaState === -1 || vaState === 0">
        <el-result icon="warning" title="KYC正在审核中" subTitle="请耐心等待">
        </el-result>
      </div>
      <div v-if="vaState >= 3 || vaState === 1">
        <el-result icon="warning" title="正在开通账户中" subTitle="请耐心等待">
        </el-result>
      </div>
    </template>
    <template v-if="vaState == 4">
      <el-card shadow="always">
        <div ref="balance" style="display: flex;width: 100%;" v-if="vaAccount.balance && vaAccount.legal.length > 0">
          <template v-for="(item, key) in vaAccount.balance">
            <div class="currency">
              <div class="flex-justify-between" style="gap:8px">
                <img v-if="key == 'USD'" src="@/assets/va/usd.png" style="width: 32px;height: 32px" alt="flag"/>
                <img v-if="key == 'EUR'" src="@/assets/va/eur.png" style="width: 32px;height: 32px" alt="flag"/>
                <img v-if="key == 'CNH'" src="@/assets/va/cnh.png" style="width: 32px;height: 32px" alt="flag"/>
                <div style="display: flex;flex-direction: column;flex: 1;">
                  <div class="flex-justify-between" style="font-size: 18px;font-weight: 500;line-height: 24px;">
                    <span>{{ key }}</span><span>{{ item }}</span>
                  </div>
                  <div class="flex-justify-between"
                       style="color: #86909c;font-size: 14px;font-weight: 400;line-height: 20px;">
                    <span v-if="key == 'USD'">美元</span>
                    <span v-if="key == 'EUR'">欧元</span>
                    <span v-if="key == 'CNH'">离岸人民币</span>
                    <span>总额</span>
                  </div>
                </div>
              </div>
            </div>

          </template>
        </div>
      </el-card>
      <el-card shadow="always" style="margin-top: 30px" v-if="vaAccount.legal && vaAccount.legal.length > 0">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" active-text-color="#409EFF">
          <template v-for="(item, index) in vaAccount.legal">
            <el-menu-item :index="index">
              <template slot="title">
            <span style="margin-left: 10px;margin-right: 10px;font-size: 16px">
              <template v-if="item.cnBankName === '贝森银行'">
                 <img src="@/assets/va/bison.png" width="35">{{ item.cnBankName }}
              </template>
             <template v-if="item.cnBankName === '稠州银行'">
                 <img src="@/assets/va/nra.png" width="35">{{ item.cnBankName }}
              </template>
              {{ item.currency }}
            </span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
        <el-descriptions style="margin-top: 5px;font-size: 16px" :column="1" size="medim" border
                         v-if="vaAccount.legal.length > 0">
          <el-descriptions-item label="银行名">
            {{ vaAccount.legal[activeIndex].bankName }}
          </el-descriptions-item>
          <el-descriptions-item label="户名">{{ vaAccount.legal[activeIndex].accountName }}</el-descriptions-item>
          <el-descriptions-item label="账号">{{ vaAccount.legal[activeIndex].accountNo }}</el-descriptions-item>
          <template v-if="vaAccount.legal[activeIndex].cnBankName === '贝森银行'">
            <el-descriptions-item label="BIC/SWIFT">
              BNFIPTPLXXX
            </el-descriptions-item>
            <el-descriptions-item label="银行地址">
              Rua Barata Salgueiro,no 33- Floor 0 1250-042 Lisbon, Portugal
            </el-descriptions-item>
            <template v-if="vaAccount.legal[activeIndex].currency =='CNH'">
              <el-descriptions-item label="中转银行">
                CCCB Shenzhen Via CNAP 105584000021
              </el-descriptions-item>
              <el-descriptions-item label="中转银行SWIFT">
                PCBCCNBJSZX
              </el-descriptions-item>
              <el-descriptions-item label="代理银行">
                China Construction Bank Corporation London Branch
              </el-descriptions-item>
              <el-descriptions-item label="代理银行SWIFT(BIC)">
                PCBCGB2B
              </el-descriptions-item>
              <el-descriptions-item label="中转银行的代理银行账户">
                44201501100059594260
              </el-descriptions-item>
            </template>
            <template v-if="vaAccount.legal[activeIndex].currency =='USD'">
              <el-descriptions-item label="中转银行">
                CITIBANK N.A., NEW YORK
              </el-descriptions-item>
              <el-descriptions-item label="中转银行SWIFT">
                CITIUS33XXX
              </el-descriptions-item>
              <el-descriptions-item label="代理银行">
                Caixa Geral de Depósitos
              </el-descriptions-item>
              <el-descriptions-item label="代理银行SWIFT(BIC)">
                CGDIPTPLXXX
              </el-descriptions-item>
              <el-descriptions-item label="中转银行的代理银行账户">
                10959653
              </el-descriptions-item>
            </template>
          </template>
          <template v-if="vaAccount.legal[activeIndex].cnBankName === '稠州银行'">
            <el-descriptions-item label="SWIFT">
              CZCBCN2X
            </el-descriptions-item>
            <el-descriptions-item label="银行地址">
              Chouyin Building, 168 Fuchun Road, Shangcheng District, Hangzhou
            </el-descriptions-item>

          </template>
        </el-descriptions>
      </el-card>
    </template>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import {singleAccount} from "@/api/fusion/mchva";
import {getFaceQrUrl} from "@/api/fusion/va/module/bison";
import {getToken} from "@/utils/auth";
export default {
  name: "bison-legal",
  filters: {
    moneyFormat(val) {
      return String(val).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    }
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList:[],
      step1Msg:'提交KYC材料',
      uploadFileUrl: process.env.VUE_APP_BASE_API  + "/bison/uploadKycByMch",
      step1Status:'',
      reverse: false,
      personal: [
        {
          content: '个⼈有效证件（护照）⾮英⽂的⾝份类证件需要翻译为英⽂进⾏律师公证',
        },
        {
          content: '⼈脸识别通过的证明⽂件/图⽚',
        },
        {
          content: '证照核验通过的⽂件/图⽚',
        },
        {
          content: '居住地址证明(⽔/电/煤⽓缴费单或带地址的银⾏ 账单、租赁合同等)'
        }
      ],
      ent: [
        {
          content: '营业执照/商业登记证',
        },
        {
          content: '周年申报表或法团成⽴表/公司查册报告',
          timestamp: '注册超过⼀年上传周年申报表，不超过1年上传法团成⽴表'
        },
        {
          content: '持股比例⼤于25%的股东有效证件',
        },
        {
          content: '企业董事有效证件'
        }
      ],
      step: undefined,
      activeIndex: 0,
      loading: false,
      vaState: undefined,
      vaAccount: {
        legal: [],
        digital: [],
        balance: {}
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onUploadSuccess(data) {
      if(data.code == 200) {
        this.$modal.msgSuccess('KYC提交成功')
        this.getList()
      } else {
        this.$modal.msgError(data.msg)
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    genQR() {
      getFaceQrUrl().then(res=>{
        document.getElementById("qrcode").innerHTML = "";
        let qrcode = new QRCode("qrcode", {
          width: 200,
          height: 200,
          text:  res.qrUrl,
          colorDark: "#000000",
          colorLight: "#FFFFFF"
        });
      })

    },
    isMobile() {
      const width = document.documentElement.clientWidth;
      return width <= 768; // 可以根据实际需求调整屏幕宽度阈值
    },
    handleSelect(index) {
      this.activeIndex = index
    },
    getList() {
      this.loading = true;
      this.vaAccount = {
        legal: [],
        digital: [],
        balance: {}
      }
      singleAccount('bison').then(response => {
        let d = response.data
        let vaState = d.vaState
        this.vaState = vaState
        if (vaState !== 4) {
          this.vaAccount = d
          if (vaState === -2 || vaState === 2) {
            if(vaState === 2) {
              this.step1Status = 'error'
              this.step1Msg = 'KYC审核驳回:' + d.remark
            }
            this.step = 0
          } else if(vaState == -1 || vaState === 0) {
            this.step1Msg = 'KYC材料已提交'
            this.step = 1
          } else if(vaState >= 3 || vaState === 1) {
            this.step = 2
          }
          return
        }
        delete d.balance.USDT
        delete d.balance.USDC
        this.vaAccount = d
        this.$nextTick(() => {
          if (this.isMobile()) {
            this.$refs.balance.style = 'display: flex;width: 100%;flex-direction: column;'
          }
        });
      });
    }
  }
};
</script>
<style scoped>
.flex-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.currency{
  background-color:rgb(245,245,245);display: flex;flex-direction: column;width: 300px;padding: 20px;box-sizing: border-box;border: 1px solid #f2f3f5;border-radius: 8px;margin-right: 12px;
}
</style>
